<style lang="less">
@import "../../styles/common.less";
@import "./components/table.less";
</style>

<template>
    <div>
        <Row>
            <Card>
                <p slot="title">
                    <Icon type="images"></Icon>
                    学生人脸特征库管理
                </p>
                <Row>
                    <Col span="24">
                        <Table :data="tableData1" :columns="tableColumns1" stripe ref="table2image"></Table>
                    </Col>
                    <Col v-if="false" class="padding-left-20">
                        <div id="showImage" class="margin-bottom-10">
                            <span>输入文件名：</span>
                            <Input v-model="imageName" icon="document" placeholder="请输入图片名" style="width: 190px"/>
                        </div>
                        <Button type="primary" @click="exportImage">导出表格为图片</Button>
                        <div id="showImage" class="show-image margin-top-20">
                            <img id="exportedImage" />
                        </div>
                    </Col>
                </Row>
            </Card>
        </Row>
    </div>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  name: "table-to-image",
  data() {
    return {
      tableData1: this.mockTableData1(),
      imageName: "",
      tableColumns1: [
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "照片",
          key: "status",
          width:500,
          render: (h, params) => {
            const row = params.row;
            const color =
              row.status === 1 ? "blue" : row.status === 2 ? "green" : "red";
            const text =
              row.status === 1
                ? "构建中"
                : row.status === 2 ? "构建完成" : "构建失败";
                var faces=['http://www.taez.com.cn/userImage/20150909062256.jpg','http://www.ygjj.com/bookpic2/2012-09-06/new476610-20120906215820516945.jpg','http://s4.sinaimg.cn/mw690/5b4da0bbtx6CAV0bsvVb3&690']
        
            var imgs=[];
            for(var i=0;i<row.time;i++)
            {
                 var img=h("img", {
              attrs: {
                style: "width:100px;height:100px;",
                src:faces[Math.floor(Math.random() * faces.length)],
                  
              }
            });
                    imgs.push(img)
            }
            return h('div',imgs);
          }
        },
        {
          title: "学院",
          key: "portrayal"
        },
        {
          title: "专业",
          key: "people"
        },
        {
          title: "人脸张数",
          key: "time",
          render: (h, params) => {
            return h("div", "共" + params.row.time + "张");
          }
        },
        {
          title: "更新时间",
          key: "update",
          render: (h, params) => {
            return h(
              "div",
              this.formatDate(this.tableData1[params.index].update)
            );
          }
        }
      ]
    };
  },
  methods: {
    mockTableData1() {
      let data = [];
      var xy = ["机械学院", "会计学院", "艺术学院", "电气学院", "管理学院"];
      var zy = ["机电", "交通", "计算机", "会计", "工业设计"];
      for (let i = 0; i < 10; i++) {
        data.push({
          name: "学生" + Math.floor(Math.random() * 100 + 1),
          status: Math.floor(Math.random() * 3 + 1),
          portrayal: xy[Math.floor(Math.random() * xy.length)],
          people: zy[Math.floor(Math.random() * zy.length)],
          time: Math.floor(Math.random() * 3 +1),
          update: new Date()
        });
      }
      return data;
    },
    formatDate(date) {
      const y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    exportImage() {
      let vm = this;
      let table = this.$refs.table2image.$el;
      /* 这部分代码用来解决生成的图片不清晰的问题 */
      // let tableWidth = table.offsetWidth;
      // let tableHeight = table.offsetHeight;
      // let canvas = document.createElement('canvas');
      // canvas.width = tableWidth * 2;
      // canvas.height = tableHeight * 2;
      // canvas.style.width = tableWidth + 'px';
      // canvas.style.height = tableHeight + 'px';
      // document.body.appendChild(canvas);
      // var context = canvas.getContext('2d');
      // context.scale(2, 2);
      /* 这部分代码用来解决生成的图片不清晰的问题 */
      html2canvas(table, {
        // canvas: canvas,
        onrendered(image) {
          var url = image.toDataURL();
          document.getElementById("exportedImage").src = url;
          let a = document.createElement("a");
          a.href = url;
          a.download = vm.imageName ? vm.imageName : "未命名";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          // document.body.removeChild(canvas);
        }
      });
    }
  }
};
</script>
